import React from 'react';
import { Link } from 'react-router-dom';
import PropTypes from 'prop-types';

// 分页
import Pagination from './pagination/index';

class MyCollection extends React.Component {
  constructor() {
    super();
    this.state = {

    }
    this.onChangePage = this.onChangePage.bind(this)
  }
  onChangePage(index) {
    this.props.onChangePage(index)
  }
  render() {
    return (
      <div>
        <ul className="mycollection-list">
          { this.props.collection.length ? this.props.collection.map(collectionItem => (
            <li key={collectionItem.newsId} className="mycollection-item" >
              <p className="mycollection-title">
                <Link to={`/detail/${collectionItem.newsId}`} target="_blank">
                  {collectionItem.title}
                </Link>
                <span className="time">收藏时间 :  {collectionItem.createTime}</span>
              </p>
            </li>))
            :
          <div className="loading">努力加载中...你可能还没有收藏任何文章...</div>
          }
        </ul>
        { this.props.total > this.props.pageSize ?
          <Pagination
            onChange={this.onChangePage}
            current={this.props.page}
            total={this.props.total}
            pageSize={this.props.pageSize}
            showLessItems
          /> : ''
        }
      </div>
    )
  }
}
export default MyCollection;

MyCollection.propTypes = {
  onChangePage: PropTypes.func,
  collection: PropTypes.arrayOf(Object),
  total: PropTypes.number.isRequired,
  page: PropTypes.number.isRequired,
  pageSize: PropTypes.number.isRequired,
}
